import React, { useState, useEffect } from 'react';
import {
  Card,
  Typography,
  Row,
  Col,
  Spin,
  Progress,
  Tag,
  Button,
  Space,
  Divider,
  Alert,
  Empty,
  Tooltip,
  Badge,
  Select,
  Input,
  Pagination,
  Modal,
  Descriptions,
  List,
  Avatar,
  Rate,
  message,
  Layout,
  Collapse
} from 'antd';
import {
  AimOutlined,
  StarOutlined,
  BookOutlined,
  TrophyOutlined,
  DollarOutlined,
  EnvironmentOutlined,
  CrownOutlined,
  ClockCircleOutlined,
  FileTextOutlined,
  BulbOutlined,
  SearchOutlined,
  FilterOutlined,
  InfoCircleOutlined,
  ExperimentOutlined,
  SendOutlined,
  RightOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  SettingOutlined
} from '@ant-design/icons';
import { careerService } from '../services/api';
import { useAuth } from '../store/AuthContext';

const { Title, Text, Paragraph } = Typography;
const { Search } = Input;
const { Option } = Select;
const { Sider, Content } = Layout;
const { Panel } = Collapse;

interface Career {
  id: number;
  title: string;
  category: string;
  description: string;
  requirements: string;
  salary_range: string;
  education_level: string;
  experience_years: string;
  skills: string;
  growth_prospects: string;
  work_location?: string;
}

interface CareerMatch {
  career: Career;
  matchScore: number;
  scoreBreakdown: {
    skills: number;
    education: number;
    experience: number;
    interests: number;
    fileContent: number;
    category: number;
  };
  fileAnalysis?: {
    skills: string[];
    interests: string[];
    domains: string[];
    summary: string;
  };
}

const CareerPlan: React.FC = () => {
  const { user, isAuthenticated } = useAuth();
  const [loading, setLoading] = useState(true);
  const [matches, setMatches] = useState<CareerMatch[]>([]);
  const [categories, setCategories] = useState<string[]>([]);
  const [selectedCategory, setSelectedCategory] = useState<string>('');
  const [searchText, setSearchText] = useState('');
  const [showAllCareers, setShowAllCareers] = useState(false);
  const [allCareers, setAllCareers] = useState<Career[]>([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [selectedCareer, setSelectedCareer] = useState<Career | null>(null);
  const [detailModalVisible, setDetailModalVisible] = useState(false);
  
  // 试炼相关状态
  const [trialModalVisible, setTrialModalVisible] = useState(false);
  const [currentQuestion, setCurrentQuestion] = useState<string>('');
  const [userAnswer, setUserAnswer] = useState<string>('');
  const [trialScore, setTrialScore] = useState<number | null>(null);
  const [trialFeedback, setTrialFeedback] = useState<string>('');
  const [isEvaluating, setIsEvaluating] = useState(false);
  const [isGeneratingQuestion, setIsGeneratingQuestion] = useState(false);
  
  // 侧边栏折叠状态
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);

  // 加载职业匹配推荐
  const loadMatches = async () => {
    try {
      setLoading(true);
      console.log('开始加载职业匹配推荐...');
      const response: any = await careerService.getMatches();
      console.log('职业匹配API响应:', response);
      if (response && response.success) {
        console.log('设置匹配数据:', response.matches);
        setMatches(response.matches);
      } else {
        console.log('API响应格式不正确:', response);
      }
    } catch (error) {
      console.error('加载职业匹配失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 加载职业分类
  const loadCategories = async () => {
    try {
      console.log('开始加载职业分类...');
      const response: any = await careerService.getCategories();
      console.log('职业分类API响应:', response);
      if (response && response.success) {
        console.log('设置分类数据:', response.categories);
        setCategories(response.categories);
      } else {
        console.log('分类API响应格式不正确:', response);
      }
    } catch (error) {
      console.error('加载职业分类失败:', error);
    }
  };

  // 加载所有职业
  const loadAllCareers = async (page: number = 1) => {
    try {
      setLoading(true);
      const response: any = await careerService.getCareers(page, 20, selectedCategory, searchText);
      if (response && response.success) {
        setAllCareers(response.careers);
        setTotalPages(response.pagination.pages);
        setCurrentPage(page);
      }
    } catch (error) {
      console.error('加载职业列表失败:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadCategories();
    if (isAuthenticated) {
      loadMatches();
    }
  }, [isAuthenticated]);

  useEffect(() => {
    if (showAllCareers) {
      loadAllCareers(1);
    }
  }, [showAllCareers, selectedCategory, searchText]);

  // 开始试炼
  const startTrial = async (career?: Career) => {
    const targetCareer = career || selectedCareer;
    if (!targetCareer) return;
    
    setIsGeneratingQuestion(true);
    setCurrentQuestion('');
    setUserAnswer('');
    setTrialScore(null);
    setTrialFeedback('');
    
    try {
      const response: any = await careerService.generateQuestion(targetCareer.id);
      if (response.success) {
        setCurrentQuestion(response.question);
      } else {
        message.error('生成题目失败，请重试');
      }
    } catch (error) {
      console.error('生成题目失败:', error);
      message.error('生成题目失败，请重试');
    } finally {
      setIsGeneratingQuestion(false);
    }
  };

  // 评测答案
  const evaluateAnswer = async () => {
    if (!selectedCareer || !userAnswer.trim()) {
      message.warning('请输入您的答案');
      return;
    }
    
    setIsEvaluating(true);
    
    try {
      const response: any = await careerService.evaluateAnswer(selectedCareer.id, currentQuestion, userAnswer);
      if (response.success) {
        setTrialScore(response.evaluation.totalScore);
        setTrialFeedback(response.evaluation.feedback);
      } else {
        message.error('评分失败，请重试');
      }
    } catch (error) {
      console.error('评分失败:', error);
      message.error('评分失败，请重试');
    } finally {
      setIsEvaluating(false);
    }
  };

  // 下一题
  const nextQuestion = () => {
    setUserAnswer('');
    setTrialScore(null);
    setTrialFeedback('');
    startTrial();
  };

  // 获取匹配分数颜色
  const getScoreColor = (score: number) => {
    if (score >= 80) return '#52c41a';
    if (score >= 60) return '#faad14';
    if (score >= 40) return '#fa8c16';
    return '#ff4d4f';
  };

  // 获取匹配等级
  const getMatchLevel = (score: number) => {
    if (score >= 80) return '高度匹配';
    if (score >= 60) return '中度匹配';
    if (score >= 40) return '低度匹配';
    return '不匹配';
  };

  // 渲染匹配分数详情
  const renderScoreBreakdown = (scores: any) => {
    const scoreItems = [
      { key: 'skills', label: '技能匹配', icon: <BookOutlined /> },
      { key: 'education', label: '学历匹配', icon: <CrownOutlined /> },
      { key: 'experience', label: '经验匹配', icon: <ClockCircleOutlined /> },
      { key: 'interests', label: '兴趣匹配', icon: <StarOutlined /> },
      { key: 'fileContent', label: '文件分析', icon: <FileTextOutlined /> },
      { key: 'category', label: '分类匹配', icon: <AimOutlined /> }
    ];

    return (
      <div style={{ marginTop: '12px' }}>
        {scoreItems.map(item => (
          <div key={item.key} style={{ 
            display: 'flex', 
            justifyContent: 'space-between', 
            alignItems: 'center',
            marginBottom: '8px'
          }}>
            <Space>
              {item.icon}
              <Text style={{ fontSize: '12px' }}>{item.label}</Text>
            </Space>
            <Progress
              percent={scores[item.key] || 0}
              size="small"
              strokeColor={getScoreColor(scores[item.key] || 0)}
              style={{ width: '100px' }}
              showInfo={false}
            />
            <Text style={{ fontSize: '12px', minWidth: '30px' }}>
              {Math.round(scores[item.key] || 0)}%
            </Text>
          </div>
        ))}
      </div>
    );
  };

  // 渲染职业卡片
  const renderCareerCard = (match: CareerMatch, isMatch: boolean = true) => {
    const { career, matchScore, scoreBreakdown } = match;
    // 安全解析技能数据
    let skills = [];
    try {
      if (career.skills) {
        if (typeof career.skills === 'string') {
          skills = JSON.parse(career.skills);
        } else if (Array.isArray(career.skills)) {
          skills = career.skills;
        }
      }
    } catch (error) {
      console.error('解析技能数据失败:', error);
      skills = [];
    }

    return (
      <Col xs={24} sm={12} lg={8} xl={6} key={career.id}>
        <Card
          hoverable
          style={{ height: '100%', marginBottom: '16px' }}
          actions={[
            <Button 
              type="link" 
              icon={<InfoCircleOutlined />}
              onClick={() => {
                setSelectedCareer(career);
                setDetailModalVisible(true);
              }}
            >
              详情
            </Button>,
            <Button 
              type="link" 
              icon={<ExperimentOutlined />}
              onClick={() => {
                setSelectedCareer(career);
                setTrialModalVisible(true);
                startTrial(career);
              }}
            >
              试炼
            </Button>
          ]}
        >
          <div style={{ marginBottom: '12px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '8px' }}>
              <Title level={5} style={{ margin: 0, flex: 1 }}>
                {career.title}
              </Title>
              {isMatch && (
                <Badge 
                  count={matchScore} 
                  style={{ 
                    backgroundColor: getScoreColor(matchScore),
                    fontSize: '12px'
                  }}
                />
              )}
            </div>
            
            <Tag color="blue" style={{ marginBottom: '8px' }}>
              {career.category}
            </Tag>
            
            <Paragraph 
              ellipsis={{ rows: 2 }} 
              style={{ 
                marginBottom: '12px', 
                fontSize: '13px',
                color: '#666'
              }}
            >
              {career.description}
            </Paragraph>
          </div>

          <div style={{ marginBottom: '12px' }}>
            <Space wrap>
              <Tag icon={<DollarOutlined />} color="green">
                {career.salary_range || '面议'}
              </Tag>
              <Tag icon={<CrownOutlined />}>
                {career.education_level || '不限'}
              </Tag>
              <Tag icon={<ClockCircleOutlined />}>
                {career.experience_years || '不限'}
              </Tag>
            </Space>
          </div>

          {isMatch && (
            <div>
              <div style={{ marginBottom: '8px' }}>
                <Text strong style={{ fontSize: '12px' }}>
                  匹配度: {getMatchLevel(matchScore)}
                </Text>
                <Progress
                  percent={matchScore}
                  size="small"
                  strokeColor={getScoreColor(matchScore)}
                  style={{ marginTop: '4px' }}
                />
              </div>
              
              <Button
                type="text"
                size="small"
                onClick={() => {
                  Modal.info({
                    title: '匹配详情',
                    content: renderScoreBreakdown(scoreBreakdown),
                    width: 400
                  });
                }}
              >
                查看匹配详情
              </Button>
            </div>
          )}

          {skills.length > 0 && (
            <div style={{ marginTop: '12px' }}>
              <Text style={{ fontSize: '12px', color: '#666' }}>技能要求:</Text>
              <div style={{ marginTop: '4px' }}>
                {skills.slice(0, 3).map((skill: string, index: number) => (
                  <Tag key={index} style={{ marginBottom: '4px', fontSize: '12px' }}>
                    {skill}
                  </Tag>
                ))}
                {skills.length > 3 && (
                  <Tag color="default" style={{ fontSize: '12px' }}>
                    +{skills.length - 3}
                  </Tag>
                )}
              </div>
            </div>
          )}
        </Card>
      </Col>
    );
  };

  console.log('CareerPlan 渲染状态:', {
    isAuthenticated,
    user,
    loading,
    matches: matches.length,
    categories: categories.length,
    showAllCareers,
    allCareers: allCareers.length
  });

  // 调试信息
  console.log('当前用户:', user);
  console.log('认证状态:', isAuthenticated);
  console.log('匹配数据:', matches);
  console.log('分类数据:', categories);

  return (
    <div 
      className="career-plan-page"
      style={{ 
        height: 'calc(100vh - 40px)', 
        background: '#f5f5f5',
        margin: '-24px',
        padding: '0',
        borderRadius: '12px',
        overflow: 'hidden'
      }}
    >
      {/* 页面标题 */}
      <div style={{ 
        padding: '16px 24px', 
        background: '#fff', 
        borderBottom: '1px solid #f0f0f0',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between'
      }}>
        <div>
          <Title level={2} style={{ margin: 0, display: 'flex', alignItems: 'center' }}>
            <AimOutlined style={{ marginRight: '12px', color: '#1890ff' }} />
            职业规划
          </Title>
          <Text type="secondary">
            基于您的个人信息和网盘文件内容，为您推荐最适合的职业方向
          </Text>
        </div>
        <Button
          type="text"
          icon={sidebarCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
          style={{ fontSize: '16px' }}
        />
      </div>

      {!isAuthenticated && (
        <Alert
          message="请先登录"
          description="职业匹配功能需要登录后才能使用，请先登录您的账户。"
          type="warning"
          showIcon
          style={{ margin: '16px 24px' }}
        />
      )}

      <Layout style={{ height: 'calc(100vh - 120px)' }}>
        {/* 左侧功能区域 */}
        <Sider
          width={sidebarCollapsed ? 0 : 300}
          collapsed={sidebarCollapsed}
          collapsedWidth={0}
          style={{ 
            background: '#fff',
            borderRight: '1px solid #f0f0f0',
            transition: 'all 0.2s'
          }}
        >
          <div style={{ padding: '16px' }}>
            <Collapse defaultActiveKey={['1', '2']} ghost>
              <Panel 
                header={
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <SettingOutlined style={{ marginRight: '8px' }} />
                    功能设置
                  </div>
                } 
                key="1"
              >
                <Space direction="vertical" style={{ width: '100%' }}>
                  <div>
                    <Text strong>查看模式</Text>
                    <div style={{ marginTop: '8px' }}>
                      <Button
                        type={!showAllCareers ? 'primary' : 'default'}
                        icon={<BulbOutlined />}
                        onClick={() => setShowAllCareers(false)}
                        block
                        style={{ marginBottom: '8px' }}
                      >
                        智能推荐
                      </Button>
                      <Button
                        type={showAllCareers ? 'primary' : 'default'}
                        icon={<SearchOutlined />}
                        onClick={() => setShowAllCareers(true)}
                        block
                      >
                        浏览全部
                      </Button>
                    </div>
                  </div>
                  
                  {showAllCareers && (
                    <>
                      <Divider />
                      <div>
                        <Text strong>筛选条件</Text>
                        <div style={{ marginTop: '8px' }}>
                          <Select
                            placeholder="选择分类"
                            style={{ width: '100%', marginBottom: '8px' }}
                            value={selectedCategory}
                            onChange={setSelectedCategory}
                            allowClear
                          >
                            {categories.map(category => (
                              <Option key={category} value={category}>
                                {category}
                              </Option>
                            ))}
                          </Select>
                          <Search
                            placeholder="搜索职业"
                            value={searchText}
                            onChange={(e) => setSearchText(e.target.value)}
                            onSearch={(value) => {
                              setSearchText(value);
                              loadAllCareers(1);
                            }}
                            enterButton
                          />
                        </div>
                      </div>
                    </>
                  )}
                </Space>
              </Panel>
              
              {matches.length > 0 && matches[0].fileAnalysis && (
                <Panel 
                  header={
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                      <BulbOutlined style={{ marginRight: '8px' }} />
                      AI分析结果
                    </div>
                  } 
                  key="2"
                >
                  <Text type="secondary" style={{ fontSize: '13px' }}>
                    {matches[0].fileAnalysis.summary || '基于您的网盘文件进行了智能分析'}
                  </Text>
                </Panel>
              )}
            </Collapse>
          </div>
        </Sider>

        {/* 右侧职业信息区域 */}
        <Content style={{ padding: '16px 24px', overflow: 'auto' }}>
          <Spin spinning={loading}>
            {!showAllCareers ? (
              // 智能推荐
              <div>
                <Title level={3} style={{ marginBottom: '16px' }}>
                  <TrophyOutlined style={{ marginRight: '8px', color: '#faad14' }} />
                  为您推荐
                </Title>
                
                {!isAuthenticated ? (
                  <Empty
                    description="请先登录以获取个性化职业推荐"
                    image={Empty.PRESENTED_IMAGE_SIMPLE}
                  />
                ) : matches.length > 0 ? (
                  <div 
                    style={{
                      maxHeight: 'calc(100vh - 200px)',
                      overflowY: 'auto',
                      padding: '12px',
                      border: '1px solid #f0f0f0',
                      borderRadius: '8px',
                      backgroundColor: '#fafafa'
                    }}
                  >
                    <Row gutter={[16, 16]}>
                      {matches.map(match => renderCareerCard(match, true))}
                    </Row>
                  </div>
                ) : (
                  <Empty
                    description="暂无推荐数据"
                    image={Empty.PRESENTED_IMAGE_SIMPLE}
                  />
                )}
              </div>
            ) : (
              // 全部职业
              <div>
                <Title level={3} style={{ marginBottom: '16px' }}>
                  <SearchOutlined style={{ marginRight: '8px', color: '#1890ff' }} />
                  职业列表
                </Title>
                
                {allCareers.length > 0 ? (
                  <>
                    <div 
                      style={{
                        maxHeight: 'calc(100vh - 200px)',
                        overflowY: 'auto',
                        padding: '12px',
                        border: '1px solid #f0f0f0',
                        borderRadius: '8px',
                        backgroundColor: '#fafafa',
                        marginBottom: '16px'
                      }}
                    >
                      <Row gutter={[16, 16]}>
                        {allCareers.map(career => renderCareerCard({ 
                          career, 
                          matchScore: 0, 
                          scoreBreakdown: {
                            skills: 0,
                            education: 0,
                            experience: 0,
                            interests: 0,
                            fileContent: 0,
                            category: 0
                          }
                        }, false))}
                      </Row>
                    </div>
                    
                    <div style={{ textAlign: 'center' }}>
                      <Pagination
                        current={currentPage}
                        total={totalPages * 20}
                        pageSize={20}
                        onChange={loadAllCareers}
                        showSizeChanger={false}
                        showQuickJumper
                      />
                    </div>
                  </>
                ) : (
                  <Empty
                    description="暂无职业数据"
                    image={Empty.PRESENTED_IMAGE_SIMPLE}
                  />
                )}
              </div>
            )}
          </Spin>
        </Content>
      </Layout>

      {/* 职业详情模态框 */}
      <Modal
        title={selectedCareer?.title}
        open={detailModalVisible}
        onCancel={() => setDetailModalVisible(false)}
        footer={null}
        width={800}
      >
        {selectedCareer && (
          <div>
            <Descriptions column={2} bordered>
              <Descriptions.Item label="职业分类" span={2}>
                <Tag color="blue">{selectedCareer.category}</Tag>
              </Descriptions.Item>
              
              <Descriptions.Item label="薪资范围">
                <Text strong style={{ color: '#52c41a' }}>
                  {selectedCareer.salary_range || '面议'}
                </Text>
              </Descriptions.Item>
              
              <Descriptions.Item label="学历要求">
                {selectedCareer.education_level || '不限'}
              </Descriptions.Item>
              
              <Descriptions.Item label="经验要求">
                {selectedCareer.experience_years || '不限'}
              </Descriptions.Item>
              
              <Descriptions.Item label="工作地点" span={2}>
                {selectedCareer.work_location || '不限'}
              </Descriptions.Item>
              
              <Descriptions.Item label="职业描述" span={2}>
                <Paragraph>{selectedCareer.description}</Paragraph>
              </Descriptions.Item>
              
              <Descriptions.Item label="任职要求" span={2}>
                <Paragraph>{selectedCareer.requirements}</Paragraph>
              </Descriptions.Item>
              
              <Descriptions.Item label="发展前景" span={2}>
                <Paragraph>{selectedCareer.growth_prospects}</Paragraph>
              </Descriptions.Item>
              
              {selectedCareer.skills && (
                <Descriptions.Item label="技能要求" span={2}>
                  <Space wrap>
                    {(() => {
                      let skills = [];
                      try {
                        if (typeof selectedCareer.skills === 'string') {
                          skills = JSON.parse(selectedCareer.skills);
                        } else if (Array.isArray(selectedCareer.skills)) {
                          skills = selectedCareer.skills;
                        }
                      } catch (error) {
                        console.error('解析技能数据失败:', error);
                        skills = [];
                      }
                      return skills.map((skill: string, index: number) => (
                        <Tag key={index} color="blue">{skill}</Tag>
                      ));
                    })()}
                  </Space>
                </Descriptions.Item>
              )}
            </Descriptions>
          </div>
        )}
      </Modal>

      {/* 试炼模态框 */}
      <Modal
        title={
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <ExperimentOutlined style={{ marginRight: '8px', color: '#1890ff' }} />
            {selectedCareer?.title} - 职业试炼
          </div>
        }
        open={trialModalVisible}
        onCancel={() => setTrialModalVisible(false)}
        footer={null}
        width={800}
        style={{ top: 20 }}
      >
        <div style={{ padding: '20px 0' }}>
          {/* 问题部分 */}
          <div style={{ marginBottom: '24px' }}>
            <Title level={4} style={{ marginBottom: '16px', color: '#1890ff' }}>
              <BulbOutlined style={{ marginRight: '8px' }} />
              题目
            </Title>
            {isGeneratingQuestion ? (
              <div style={{ textAlign: 'center', padding: '40px 0' }}>
                <Spin size="large" />
                <div style={{ marginTop: '16px' }}>AI正在生成题目...</div>
              </div>
            ) : currentQuestion ? (
              <Card style={{ backgroundColor: '#f8f9fa' }}>
                <Paragraph style={{ margin: 0, fontSize: '16px', lineHeight: '1.6' }}>
                  {currentQuestion}
                </Paragraph>
              </Card>
            ) : (
              <Empty description="暂无题目" />
            )}
          </div>

          {/* 输入框部分 */}
          <div style={{ marginBottom: '24px' }}>
            <Title level={4} style={{ marginBottom: '16px', color: '#52c41a' }}>
              <SendOutlined style={{ marginRight: '8px' }} />
              您的答案
            </Title>
            <Input.TextArea
              value={userAnswer}
              onChange={(e) => setUserAnswer(e.target.value)}
              placeholder="请在此输入您的答案..."
              rows={6}
              style={{ fontSize: '16px' }}
              disabled={!currentQuestion || isEvaluating}
            />
            <div style={{ marginTop: '12px', textAlign: 'right' }}>
              <Button
                type="primary"
                icon={<SendOutlined />}
                onClick={evaluateAnswer}
                loading={isEvaluating}
                disabled={!userAnswer.trim() || !currentQuestion}
                size="large"
              >
                {isEvaluating ? '评测中...' : '提交评测'}
              </Button>
            </div>
          </div>

          {/* 评分部分 */}
          {trialScore !== null && (
            <div style={{ marginBottom: '24px' }}>
              <Title level={4} style={{ marginBottom: '16px', color: '#faad14' }}>
                <TrophyOutlined style={{ marginRight: '8px' }} />
                评分结果
              </Title>
              <Card style={{ backgroundColor: '#fff7e6' }}>
                <div style={{ textAlign: 'center', marginBottom: '16px' }}>
                  <div style={{ fontSize: '48px', fontWeight: 'bold', color: getScoreColor(trialScore) }}>
                    {trialScore}
                  </div>
                  <div style={{ fontSize: '18px', color: '#666' }}>分</div>
                  <Rate 
                    value={trialScore / 20} 
                    disabled 
                    style={{ fontSize: '24px', marginTop: '8px' }}
                  />
                </div>
                <Divider />
                <div>
                  <Text strong style={{ fontSize: '16px' }}>评价反馈：</Text>
                  <Paragraph style={{ marginTop: '8px', fontSize: '15px', lineHeight: '1.6' }}>
                    {trialFeedback}
                  </Paragraph>
                </div>
              </Card>
            </div>
          )}

          {/* 操作按钮 */}
          <div style={{ textAlign: 'center', paddingTop: '20px', borderTop: '1px solid #f0f0f0' }}>
            <Space size="large">
              <Button
                type="primary"
                icon={<RightOutlined />}
                onClick={nextQuestion}
                loading={isGeneratingQuestion}
                size="large"
              >
                下一题
              </Button>
              <Button
                onClick={() => setTrialModalVisible(false)}
                size="large"
              >
                结束试炼
              </Button>
            </Space>
          </div>
        </div>
      </Modal>
    </div>
  );
};

export default CareerPlan;
